@dark: #34495E;
@darker: #2C3E50;
@grey: #95A5A6;
@greyer: #7F8C8D;
@light: #BDC3C7;
@lighter: #ECF0F1;
@black: #000;
@white: #FFF;

@blue: #3498DB;
@orange: #F39C12;

@screen-small: 37.5em;
@screen-tablet: 48em;
@screen-desktop: 62em;
@screen-large: 75em;

.rotate (@rotate: 0deg) {
  -webkit-transform: rotate(@rotate);
  -moz-transform: rotate(@rotate);
  -ms-transform: rotate(@rotate);
  -o-transform: rotate(@rotate);
  transform: rotate(@rotate);
}

.box-shadow (@string) {
  -webkit-box-shadow: @string;
  -moz-box-shadow:    @string;
  box-shadow:         @string;
}

.border-radius (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius:    @radius;
  border-radius:         @radius;

  -moz-background-clip:    padding;
  -webkit-background-clip: padding-box;
  background-clip:         padding-box;
}

.opacity (@opacity: 0.5) {
  -webkit-opacity: @opacity;
  -moz-opacity:    @opacity;
  opacity:         @opacity;
}

html {
  color: @darker;
  font-size: 1em;
  line-height: 1.4;

  @media screen and (max-width: @screen-tablet) {
    -webkit-user-select: none;
    user-select: none;
  }
}

body {
  font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;

  @media screen and (max-width: @screen-tablet) {
    -webkit-user-select: none;
    user-select: none;
  }
}

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

audio,
canvas,
img,
svg,
video {
  vertical-align: middle;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

textarea {
  resize: vertical;
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.visuallyhidden {
  &.focusable {
    &:active, &:focus {
      clip: auto;
      height: auto;
      margin: 0;
      overflow: visible;
      position: static;
      width: auto;            
    }
  }
}

.invisible {
  visibility: hidden;
}

.clearfix {
  &:before, &:after {
    content: " ";
    display: table;    
  }
  &:after {
    clear: both;
  }
}

a {
  color: @dark;
  text-decoration: none;
  -webkit-touch-callout: none;

  &:hover, &:active {
    color: @dark;
    text-decoration: none;
  }
}

.hidden {
  display: none !important;
  visibility: hidden;
}

.container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;

  .desc {
    color: @greyer;
    .box-shadow(0 0 1px @light);

    @media screen and (min-width: @screen-small) {
      font-size: 1em;
    }
  }

  .container-inner {
    min-height: 100%;
    margin: 0 0 2px 0;
    overflow: hidden;
  }

}

header {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3em;
  overflow: hidden;
  z-index: 1;
  background: @dark;
  color: @lighter;

  @media screen and (min-width: @screen-tablet) {
    display: none;
  }

  h1 {
    position: absolute;
    left: 50%;
    top: 0.6em;
    margin: 0;
    font-size: 1em;
    font-weight: 200;

    span {
      display: block;
      max-width: 8em;
      margin-left: -50%;
      margin-right: 50%;
      font-size: 1.4em;
      overflow: hidden;
    }
  }

}

.btn-menu, .btn-back {
  float: left;
  font-weight: 200;
  margin: 0.65em;
  padding: 0.2em;
  background: @lighter;
  .border-radius(3px);
}
